<template>
  <div class="main">
    <div v-if="is_login" class="inner">
      <div class="left">
        <left-head @logout="logout"></left-head>
        <left-search></left-search>
        <left-body></left-body>
      </div>
      <div class="right">
        <div v-if="currentWindowObject !== null">
          <right-head></right-head>
          <right-body></right-body>
          <right-foot></right-foot>
        </div>
        <right-empty v-else></right-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import LeftHead from './Left/Head'
import LeftSearch from './Left/Search'
import LeftBody from './Left/Body'
import RightHead from './Right/Head'
import RightBody from './Right/Body'
import RightFoot from './Right/Foot'
import RightEmpty from './Right/Empty'

export default {
  name: 'Index',
  components: {
    LeftHead,
    LeftSearch,
    LeftBody,
    RightHead,
    RightBody,
    RightFoot,
    RightEmpty
  },
  mounted () {
    // 未登录执行登录
    if (this.is_login === false) {
      this.login()
    } else {
      this.handleLogin(this.userinfo)
    }
  },
  computed: {
    ...mapState(['userinfo', 'currentWindowObject']),
    is_login () {
      return this.userinfo.uuid !== 0
    }
  },
  methods: {
    login () {
      this.$swal({
        title: '输入您的昵称',
        content: 'input',
        closeOnEsc: false,
        closeOnClickOutside: false
      }).then((username) => {
        if (username.length === 0) {
          this.$swal({
            title: 'Warning',
            icon: 'warning',
            text: '请输入用户名'
          }).then(() => {
            this.login()
          })
        } else {
          this.handleLogin({
            username,
            uuid: (new Date()).getTime()
          })
        }
      })
    },
    logout () {
      this.login()
      this.handleLogout()
    },
    ...mapActions({
      handleLogin: 'login',
      handleLogout: 'logout'
    })
  }
}
</script>

<style lang="stylus" scoped>
  .main
    height 720px
    padding 100px
    .inner
      margin 0 auto
      width 1000px
      height 100%
      border-radius 3px
      overflow hidden
      display flex
      .left
        width 28%
        height 100%
        position relative
        background #2e3238
      .right
        width 72%
        height 100%
        background #eeeeee
        overflow hidden
        position relative
</style>
